<template>
  <div>
    <ul>
      <li class="flexStyle" :style="{background:getBorder(level)}">
        <div>
          <span @click="expanded=!expanded" :style="{paddingLeft:level*50+'px',color:getFontColor(level),cursor:'pointer'}">
            {{router.title}}
            <el-popover placement="bottom" width="220" trigger="click">
              <span>
                <span v-for="(v,k,i) in router.auth" :key="i">
                  {{getKeyName(k)}}
                  <el-switch v-model="router.auth[k]" @change="changeBtn(k,router.auth[k])" :active-value="true"
                    :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949">
                  </el-switch>
                </span>
              </span>
              <span class="tree_auth" slot="reference" v-if="router.auth">{{getCRUD(router.auth)}}</span>
            </el-popover>
          </span>
          <span v-if="router.children">
            <i v-if="expanded&&router.children.length>0" @click="expanded = false" class="el-icon-remove-outline unexpanded"></i>
            <i v-else @click="expanded = true" class="el-icon-circle-plus-outline expanded"></i>
          </span>
        </div>
      </li>
      <li>
        <el-switch :style="{marginLeft:level*40+'px',color:'white',cursor:'pointer'}"  @change="changeRouter(router,router.visible)"
                v-model="router.visible" active-text="開" inactive-text="关" active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </li>
    </ul>
    <item :level="level+1" v-if="router.children&&router.children.length>0&&!v.hidden&&expanded" v-for="(v, i) in router.children"
      :key="i" :router="v" :parent="router.children">
    </item>
  </div>
</template>

<script>
  import item from "./item";
  export default {
    name: "item",
    components: {
      item
    },
    props: {
      router: Object,
      parent: Array,
      level: Number
    },
    data() {
      return {
        expanded: true
      };
    },
    methods: {
      getCRUD(auth) {
        let str = "";
        Object.keys(auth).forEach(key => {
          if (auth[key] == true) {
            str += this.getKeyName(key)
          };
        });
        (str === '') && (str = '无权限')
        return str;
      },
      // 设置同级路由中与key名字相同的路由表状态的visible状态
      changeBtn(key, visible) {
        this.parent.forEach(child => {
          (child.routeName == key && child.hidden) && (child.visible = visible)
        })
      },
      // 递归更改该路由下所有模块的可见性
      changeRouter(v, flag) {
        console.log(this.router);
        v.visible = flag;
        if (v.children && v.children.length > 0) {
          v.children.forEach(child => {
            this.changeRouter(child, flag);
          });
        }
      },
      getKeyName(key) {
        switch (key) {
          case "add":
            return "增";
          case "delete":
            return "删";
          case "edit":
            return "改";
        }
      },
      getFontColor(level) {
        switch (level) {
          case 1:
            return '#303133';
          case 2:
            return '#606266'
          case 3:
            return '#909399'
        }
      },
      getBorder(level) {
        // switch (level) {
        //   case 1:
        //     return '#FF7256';
        //   case 2:
        //     return '#FF8247'
        //   case 3:
        //     return '#FF8C69'
        // }
      }
    }
  };
</script>

<style lang="scss" scoped>
  ul {
    list-style: none;
    display: flex;
    transition: 1s;
    background: white;
    box-shadow: 0 0 10px #eee;
  }
  .flexStyle{
    display: flex;
    justify-content: space-between;
  }
  li {
    font-weight: bold;
    border: 1px solid #DCDFE6;
    padding: 15px;
    border-top: 0;
    border-right: 0;
    flex: 4;
    font-size: 18px;

    .expanded {
      color: black;
      cursor: pointer;
    }

    &:last-child {
      border-right: 1px solid #DCDFE6;
      flex: 1;
    }

    .unexpanded {
      color: red;
      cursor: pointer;
    }
  }

  .tree_auth {
    background: #ffd700;
    margin-left: 10px;
    border-radius: 4px;
    color: white;
    padding: 4px;
    width: 100%;
    cursor: pointer;
    text-indent: 10px;
  }
</style>